<template>
  <el-button class="myButtonX" :class="{isLine: props.inline}"
             v-bind="$attrs" :type="typeD">
    <slot/>
    <template #icon v-if="$attrs.icon == undefined && props.iconSlot == true">
      <slot name="icon"/>
    </template>
    <template #loading v-if="$attrs.loadingIcon == undefined && $attrs['loading-icon'] == undefined">
      <slot name="loading"/>
    </template>
  </el-button>
</template>

<script setup>
import {computed} from 'vue'
import { ElButton } from 'element-plus'

const props = defineProps({
  type: {
    type: [String, Number],
    default: ''
  },
  inline: {
    type: Boolean,
    default: true
  },
  // 是否需要图标插槽
  iconSlot: {
    type: Boolean,
    default: false
  },
})

const typeD = computed(() => {
  let temp = props.type.toLowerCase()
  if (temp == '' || temp.includes('f')) {
    return 'default'
  }
  if (temp.includes('p')) {
    return 'primary'
  }
  if (temp.includes('s')) {
    return 'success'
  }
  if (temp.includes('i') && !temp.includes('w')) {
    return 'info'
  }
  if (temp.includes('w')) {
    return 'warning'
  }
  if (temp.includes('d') && !temp.includes('f')) {
    return 'danger'
  }
})

const getAttrs = item => {
  console.log(item)
}

</script>

<style scoped lang='scss'>
.myButtonX {
}

.isLine {

}
</style>